{% extends "student/base.html" %}
{% block title %}已选课程{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row items-center justify-between mb-8 gap-4">
    <!-- 标题与筛选 -->
    <h2 class="text-xl font-bold text-gray-800">已选课程（共 {{ selected_courses|length }} 门）</h2>
</div>

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程编号</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任课教师</th>
                     <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课地点</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">上课时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程类型</th>
                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
            </thead>
            <tbody id="selectedCourseList">
                {% for selection in selected_courses %}
                <tr data-selection-id="{{ selection.id }}" class="hover:bg-gray-50 transition-colors">
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.course_code }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.course_name }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.teacher.username }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.location }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.time.strftime('%Y-%m-%d %H:%M') }}
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-900">
                        {{ selection.courses.course_type }}
                    </td>
                    <td class="px-6 py-4 text-right">
                        <button class="text-red-500 hover:text-red-700 delete-btn" data-selection-id="{{ selection.id }}">
                            <i class="fa fa-trash-alt mr-1"></i> 退选
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if not selected_courses %}
    <div class="p-12 text-center">
        <div class="mb-6">
            <i class="fa fa-book-open text-4xl text-primary/10 animate-spin"></i>
        </div>
        <h3 class="text-lg font-bold text-gray-800 mb-2">尚未选择任何课程</h3>
        <p class="text-gray-500 mb-6">点击 <a href="{{ url_for('student.course_selection') }}" class="text-primary hover:underline">这里</a> 查看可选课程</p>
    </div>
    {% endif %}
</div>

<!-- 退选提示Toast -->
<div id="toast" class="fixed bottom-4 right-4 p-4 bg-red-100 border border-red-200 rounded-lg shadow hidden">
    <div class="flex items-center gap-2">
        <i class="fa fa-exclamation-circle text-red-500"></i>
        <span id="toastMessage"></span>
    </div>
</div>

<script src="{{ url_for('static',filename='js/student_js/course_ready_selection.js') }}"></script>
{% endblock %}